<template>
  <div>
    <h1>this is Slot Page</h1>
    <BaseSlot :url="webdata.url">{{webdata.msg}}</BaseSlot>
    <ScopedSlot :url="webdata.url">
      <template v-slot="propsSlot">{{'这个插插槽内的 ,'+propsSlot.slotData.msg}}</template>
    </ScopedSlot>
    <h3>具名插槽</h3>
    <NamedSlot>
      <template v-slot:header>
        <h3>我线程插入的头部</h3>
      </template>
      <p>我将插入到mian</p>
      <template v-slot:footer>
        <h3>我线程插入的底部</h3>
      </template>
    </NamedSlot>
  </div>
</template>


<script>
import BaseSlot from "./BaseSlot";
import ScopedSlot from "./ScopedSlot";
import NamedSlot from "./NamedSlot";

export default {
  components: {
    BaseSlot,
    ScopedSlot,
    NamedSlot
  },
  data() {
    return {
      webdata: {
        url: "www.google.com",
        msg: "去谷歌"
      },
      namedata: {}
    };
  }
};
</script>